import { Tabs } from 'antd'
import { ReactComponent as AddQywxIcon } from '@/desktop/assets/add-qywx.svg'
import { SiderItem } from '@/desktop/views/app'
import { panelSubject, CoverPanel } from '@/desktop/views/app/cover-panel'
import useUIMemory from '@/logics/memory'
import { commonS } from '../styles'
import { BatchAddQywx } from './batch'
import { HistoryAddQywx } from './history'
import { ScanAddQywx } from './scan'

export function AddQywxTrigger(props: { collapsed: boolean }) {
  const { collapsed } = props
  const open = useCallback(() => panelSubject.next(AddQywx), [])

  return <SiderItem
    css={commonS.siderItem}
    collapsed={collapsed}
    icon={<AddQywxIcon />}
    title="登录企业微信"
    onClick={open}
  />
}

function AddQywx() {
  const [tab, rawSetTab] = useUIMemory('add-qywx-tab', 'scan')
  const [showBatch, setShowBatch] = useState(false)
  function setTab(tab: string) {
    if (tab === 'batch') setShowBatch(true)
    else rawSetTab(tab)
  }
  const tabs = useMemo(
    () => [
      { label: '扫码登录', key: 'scan', children: <ScanAddQywx /> },
      //{ label: '登录过的企微', key: 'history', children: <HistoryAddQywx /> },
      //{ label: '自动寻机登录', key: 'batch', children: null },
    ],
    [],
  )

  return <CoverPanel title="登录企业微信">
    <div css={s.wrap}>
      <Tabs
        tabPosition="left"
        destroyInactiveTabPane
        items={tabs}
        activeKey={tab}
        onChange={setTab}
        css={s.tabs}
      />
    </div>
    <BatchAddQywx visible={showBatch} onClose={() => setShowBatch(false)} />
  </CoverPanel>
}

const s = {
  wrap: css`
    flex: 1;
    overflow: hidden;
  `,
  tabs: css`
    max-height: 100%;
    min-height: 350px;
    padding-top: 30px;

    & > .ant-tabs-nav .ant-tabs-tab {
      padding-left: 0;
      width: 180px;
    }

    & > .ant-tabs-content-holder {
      overflow-y: auto;
    }

    // 各 tab 通用样式
    & > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
      padding-left: 48px;
      padding-bottom: 20px;

      // 小节标题
      h5 {
        font-size: 13px;
        margin-bottom: 20px;
      }

      // 右对齐表单 label，需自行设置宽度
      .settings-label {
        color: #777;
        display: inline-block;
        font-size: 13px;
        margin-right: 0.5em;
        text-align: right;
      }
    }
  `,
}
